.sub-sidebar {
  .sub-sidebar__iconbox {
    float: left;

    .sub-sidebar__trigger {
      color: #4B5D6C;
      cursor: pointer;
    }
  }

  .ant-menu {
    padding-top: 20px;
  }

  .ant-menu-item,
  .ant-menu-submenu-title {
    [class*='gsd-icon-'] {
      min-width: 14px;
      margin-right: 10px;
      font-size: 14px;
      transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
      margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }

  .ant-menu-inline-collapsed
  > .ant-menu-item-group
  > .ant-menu-item-group-list
  > .ant-menu-item
  [class*='gsd-icon-']
  + span,
  .ant-menu-inline-collapsed
  > .ant-menu-item-group
  > .ant-menu-item-group-list
  > .ant-menu-submenu
  > .ant-menu-submenu-title
  [class*='gsd-icon-']
  + span,
  .ant-menu-inline-collapsed > .ant-menu-item [class*='gsd-icon-'] + span,
  .ant-menu-inline-collapsed
  > .ant-menu-submenu
  > .ant-menu-submenu-title
  [class*='gsd-icon-']
  + span {
    max-width: 0;
    display: inline-block;
    opacity: 0;
  }

  .ant-menu-item [class*='gsd-icon-'] + span,
  .ant-menu-submenu-title [class*='gsd-icon-'] + span {
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 1;
  }

  // ------ 以下为新加样式
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item,
  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
    padding-left: 32px !important;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    position: relative;
    background-color: transparent;
    color: #fff;

    > [class*='gsd-icon'],
    > .anticon,
    > span {
      position: relative;
      z-index: 1;
    }

    &:after {
      background: linear-gradient(270deg, #5c99f5 0%, #4a62e7 100%);
      border-radius: 4px;
      top: 4px;
      left: 24px;
      right: 16px;
      bottom: 4px;
      width: auto;
      z-index: -1;
    }
  }

  &.ant-layout-sider-collapsed
  .ant-menu:not(.ant-menu-horizontal)
  .ant-menu-item-selected {
    &:after {
      left: 20px;
      right: 20px;
    }
  }

  .ant-menu-inline.ant-menu-sub .ant-menu-item,
  .ant-menu-inline.ant-menu-sub .ant-menu-submenu-title {
    padding-left: 74px !important;

    &.ant-menu-item-selected {
      &:before {
        background-color: #fff;
      }

      .ant-menu-submenu-title {
        &:before {
          background-color: #fff;
        }
      }
    }
  }

  .ant-menu-inline.ant-menu-sub .ant-menu-inline.ant-menu-sub .ant-menu-item {
    padding-left: 90px !important;
  }

  .ant-menu-light.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    &:before {
      display: none;
    }
  }

  &__interrelation {
    .ant-menu-light.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
      &:hover {
        background-color: transparent;
        color: #fff;
      }
    }
  }
}

.ant-menu-submenu-popup {
  background: transparent;
}

.ant-menu-submenu.ant-menu-submenu-vertical.ant-menu-submenu-selected {
  color: #fff;
  background-color: transparent;

  &:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.05);
  }

  .anticon,
  [class*='gsd-icon'] {
    color: #fff;
  }

  &::before {
    width: 40px;
    height: 40px;
    background: linear-gradient(270deg, #5c99f5 0%, #4a62e7 100%);
    border-radius: 4px;
    right: 0;
    margin: auto;
    z-index: -1 !important;
  }
}

$---font-color--light: #4b5d6c;

$---font-color--light--selected--hover: #1d1f24;

// 缩小模式
.ant-menu-root.ant-menu-vertical
> .ant-menu-submenu.ant-menu-submenu-vertical.ant-menu-submenu-selected {
  &::before {
    width: 40px;
    height: 40px;
  }
}

.ant-menu-light.ant-menu-submenu-popup
.ant-menu-submenu-vertical.ant-menu-submenu-selected {
  &:before {
    width: 4px;
    height: 4px;
    top: 0;
    right: auto;
    left: 12px;
    margin-top: auto;
    margin-bottom: auto;
    background: #fff;
    z-index: 1 !important;
  }

  .ant-menu-submenu-title {
    color: #fff;
    background: linear-gradient(270deg, #5c99f5 0%, #4a62e7 100%);

    & > .ant-menu-submenu-arrow {
      &:before,
      &:after {
        background: linear-gradient(270deg, #fff 0%, #fff 100%);
      }
    }

    &:hover {
      color: inherit;
      background-color: transparent !important;
    }
  }

  &:hover {
    color: $---font-color--light--selected--hover;

    &:before {
      background: $---font-color--light--selected--hover;
    }

    .ant-menu-submenu-title {
      background: linear-gradient(
                      270deg,
                      rgba(0, 0, 0, 0.05) 0%,
                      rgba(0, 0, 0, 0.05) 100%
      );

      > .ant-menu-submenu-arrow {
        &:before,
        &:after {
          background: linear-gradient(
                          270deg,
                          $---font-color--light--selected--hover 0%,
                          $---font-color--light--selected--hover 100%
          );
        }
      }
    }
  }
}

.ant-menu-light.ant-menu-submenu-popup
.ant-menu-submenu-vertical.ant-menu-submenu-active {
  color: $---font-color--light--selected--hover;

  &:before {
    background: $---font-color--light--selected--hover;
  }

  .ant-menu-submenu-title {
    color: $---font-color--light--selected--hover;
    background: linear-gradient(
                    270deg,
                    rgba(0, 0, 0, 0.05) 0%,
                    rgba(0, 0, 0, 0.05) 100%
    );

    > .ant-menu-submenu-arrow {
      &:before,
      &:after {
        background: linear-gradient(
                        270deg,
                        $---font-color--light--selected--hover 0%,
                        $---font-color--light--selected--hover 100%
        );
      }
    }
  }
}

.ant-menu-light.ant-menu-submenu-popup
.ant-menu-submenu-content
.ant-menu-item-active.ant-menu-item-selected,
.ant-menu-light.ant-menu-submenu-popup
.ant-menu-submenu-content
.ant-menu-item-selected {
  color: #fff;
  background: linear-gradient(270deg, #5c99f5 0%, #4a62e7 100%);

  &:before {
    width: 4px;
    height: 4px;
    top: 0;
    right: auto;
    left: 12px;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 50%;
    background: #fff;
    z-index: 1 !important;
  }

  &:after {
    display: none;
  }

  &:hover {
    color: $---font-color--light--selected--hover;
    background: linear-gradient(
                    270deg,
                    rgba(0, 0, 0, 0.05) 0%,
                    rgba(0, 0, 0, 0.05) 100%
    );

    &:before {
      background: $---font-color--light--selected--hover;
    }

    .ant-menu-submenu-title {
      color: $---font-color--light--selected--hover;

      > .ant-menu-submenu-arrow {
        &:before,
        &:after {
          background: linear-gradient(
                          270deg,
                          $---font-color--light--selected--hover 0%,
                          $---font-color--light--selected--hover 100%
          );
        }
      }
    }
  }
}